<style lang="less" scoped>
@primary-color:#FE9333;//橘黄色默认颜色
@write-color:#fff;//白色默认颜色
@font-color:#686E71;//默认黑色字体
@border-color:#E3E8EA;//默认边框
.textbox{
    .close{
        position: absolute;
        top:5px;
        right:10px;
        width: 20px;
        height: 20px;
        background:url('../images/assembly_close.png') no-repeat;
        cursor: pointer;
    }
    .btn{
        position: absolute;
        left:0;
        bottom: 11px;
        Button{
            width: 110px;
            height: 36px;
            padding: 0;
            text-align: center;
            line-height: 36px;
        }
        .styleOk{
            margin: 0 20px;
        }
        .styleClear{
            background-color: #F16473;
            border-color:#F16473;
        }

    }
    .name{
        line-height: 26px;
        font-size: 12px;
        color: @font-color;
    }
    .choosecolor{
        width: 154px;
        height: 20px;
        display: inline-block;
        margin-top: 3px;
        border: 1px solid @border-color;
        cursor: pointer;
        vertical-align: top;
    }
    .choosecolordiv{
        display: inline-block;
        width: 154px;
        height: 26px;
        line-height: 26px;
        background-color: @border-color;
        padding-left: 10px;
        color:@font-color;
    }
    .clearColor{
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-top: 3px;
        background: #F6FAF9;
        border: 1px solid #E3E8EA;
        cursor: pointer;
        float: right;
    }
}
//动画

</style>
<style lang="less">
.textbox{
    .ivu-tabs{
        overflow: visible;
        .ivu-collapse-content{
           overflow: visible;
        }
        .ivu-slider-button-wrap .ivu-tooltip{
            display: none;
        }
        .ivu-tabs-tabpane{
            position: relative;
        }
    }
   .ivu-select-single .ivu-select-selection .ivu-select-placeholder{
        height: 26px;
        line-height: 26px;
    }
    .ivu-select-single .ivu-select-selection .ivu-select-selected-value{
        height: 26px;
        line-height: 26px
    }
    .ivu-select-single .ivu-select-selection{
        height: 26px;
    }
    .ivu-collapse-content{
        width: 100%;
        padding:  0 20px;
    }
    .ivu-row{
        margin-bottom: 13px;
    }
    .ivu-slider-wrap{
        margin: 0;
        
    }
    .ivu-slider-input .ivu-slider-wrap{
        width: 108px;
        float: left;
        margin: 0;
        margin-top: 3px;
    }
    .ivu-slider-input .ivu-input-number{
        margin: 0;
        height: 26px;
        line-height: 26px;
        width: 66px;
        .ivu-input-number-handler{
            height: 13px;
        }        
    }
    .ivu-input-number-input-wrap{
        height: 26px;
        .ivu-input-number-input{
            height: 26px;
            line-height: 26px;
            background-color: #F6FAF9;
        }
    }

    .ivu-collapse-content{

        .vue-color__sketch{
            position: absolute;
            top:30px;
            right: 0;
            z-index: 1;
        }
    }
}
</style>
<template>
	<div class="textbox" v-show="texthide"  @click.stop="hidetext()">
        <div class="close" @click="sucbtnFn"></div>
        <h5 v-drag>文本组件设置</h5>
          <div class="btn">
            <Button type="warning" class="styleOk" @click="sucbtnFn">确定</Button>
            <Button type="primary" class="styleClear" @click="clearstyleFn">清除样式</Button>
        </div>  
        <Tabs type="card" :animated="false">
            <Tab-pane label="样式" class="styles">
                <Collapse accordion>
                    <Panel name="1">
                        基础样式
                        <div slot="content">
                            <Row>
                                <Col span="6" class="name">
                                    字体
                                </Col>
                                <Col span="18">
                                    <Select v-model="styleCss.fontFamily" >
                                        <Option v-for="item in fontFamily" :value="item.value" :key="item">{{ item.label }}</Option>
                                    </Select>
                                </Col>                                                                
                            </Row>
                            <Row>
                                <Col span="6" class="name">
                                    文字大小
                                </Col>
                                <Col span="18">
                                    <!-- <Slider show-input v-model="styleCss.fontSize" :min="12" :max="100"></Slider> -->
                                    <Select type="text" v-model="styleCss.fontSize" placeholder="请选择字体大小">
                                         <Option value="12px" >{{'12'}}</Option>
                                         <Option value="13px" >{{'13'}}</Option>
                                         <Option value="14px" >{{'14'}}</Option>
                                         <Option value="16px" >{{'16'}}</Option>
                                         <Option value="18px" >{{'18'}}</Option>
                                         <Option value="20px" >{{'20'}}</Option>
                                         <Option value="24px" >{{'24'}}</Option>
                                         <Option value="32px" >{{'32'}}</Option>
                                         <Option value="48px" >{{'48'}}</Option>
                                         <Option value="64px" >{{'64'}}</Option>
                                         <Option value="96px" >{{'96'}}</Option>                                        
                                    </Select>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="6" class="name">
                                    背景颜色
                                </Col>
                                <Col span="18">
                                    <div @click.stop="bgcolor()" class="choosecolor" :style="'background-color:'+styleCss.backgroundColor"></div>
                                    <!-- <div class="choosecolordiv">{{styleCss.backgroundColor}}</div> -->
                                    <!-- 清除颜色 -->
                                    <div class="clearColor" @click.stop="bgclearFn"></div>
                                    <div @click.stop="">
                                        <sketch-picker v-show="sketchboxBg" @change-color="onChange" v-model="styleCss.backgroundColor" ></sketch-picker>
                                    </div>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="6" class="name">
                                    文字颜色
                                </Col>
                                <Col span="18">
                                    <div @click.stop="ftcolor()" class="choosecolor" :style="'background-color:'+styleCss.color"></div>
                                    <!-- <div class="choosecolordiv">{{styleCss.color}}</div> -->
                                    <!-- 清除颜色 -->
                                    <div class="clearColor" @click.stop="txcolorFn"></div>
                                    <div @click.stop="">
                                        <sketch-picker v-show="sketchboxFt" @change-color="onChange1" v-model="styleCss.color" ></sketch-picker>
                                    </div>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="6" class="name">
                                    透明度
                                </Col>
                                <Col span="18">
                                    <Slider show-input v-model="styleCss['opacity']" :min="0" :max="100"></Slider>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="6" class="name">
                                    边距
                                </Col>
                                <Col span="18">
                                    <Slider show-input v-model="styleCss['padding']" :min="0" :max="100"></Slider>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="6" class="name">
                                    行高
                                </Col>
                                <Col span="18">
                                    <Slider show-input v-model="styleCss['lineHeight']" :min="12" :max="100"></Slider>
                                </Col>
                            </Row>
                        </div>                                            
                    </Panel>
                    <Panel name="2">
                        边框样式
                        <div slot="content">
                            <Row>
                                <Col span="6" class="name">
                                    尺寸
                                </Col>
                                <Col span="18">
                                    <Slider show-input v-model="styleCss['borderWidth'] " :min="0" :max="10"></Slider>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="6" class="name">
                                    样式
                                </Col>
                                <Col span="18">
                                    <Select v-model="styleCss['borderStyle']" placeholder="请选择边框样式">
                                        <Option v-for="item in borderStyle" :value="item.value" :key="item">{{item.label}}</Option>
                                    </Select>
                                </Col>                                                                
                            </Row>
                             <Row>
                                <Col span="6" class="name">
                                    颜色
                                </Col>
                                <Col span="18">
                                
                                    <div @click.stop="bdcolor()" class="choosecolor" :style="styleCss['borderColor']"></div>
                                    <!-- 清除颜色 -->
                                    <div class="clearColor"></div>
                                    <!-- <div class="choosecolordiv">{{styleCss['borderColor']}}</div> -->
                                    <div @click.stop="">
                                        <sketch-picker v-show="sketchboxbd" @change-color="onChange2" v-model="styleCss['borderColor']" ></sketch-picker>
                                    </div>
                                </Col>
                            </Row>
                        </div>
                    </Panel>
                </Collapse>
            </Tab-pane>
            <!-- <Tab-pane label="动画">
                <Collapse accordion>
                    <Panel name="1">
                        动画1
                        <div slot="content">
                            <Row>
                                <Col span="6" class="name">
                                    方式
                                </Col>
                                <Col span="18">
                                    <Select v-model="model1">
                                        <Option-group label="进入">
                                             <Option  value="1" >{{'移入'}}</Option>
                                             <Option  value="弹入" >{{'弹入'}}</Option>
                                             <Option  value="淡入" >{{'淡入'}}</Option>
                                        </Option-group>                                                                        
                                    </Select>
                                </Col>                                                                
                            </Row>
                           <Row>
                                <Col span="6" class="name">
                                    方向
                                </Col>
                                <Col span="18">
                                    <Select v-model="model1">
                                        <Option  value="从上到下" >{{'从上到下'}}</Option> 
                                        <Option  value="从下到上" >{{'从下到上'}}</Option> 
                                        <Option  value="从左到右" >{{'从左到右'}}</Option> 
                                        <Option  value="从右到左" >{{'从右到左'}}</Option> 
                                    </Select>
                                </Col>                                                                
                            </Row>
                            <Row>
                                <Col span="6" class="name">
                                    时间
                                </Col>
                                <Col span="18">
                                    <Slider show-input v-model="ac " :min="12" :max="100"></Slider>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="6" class="name">
                                    延迟
                                </Col>
                                <Col span="18">
                                    <Slider show-input v-model="ac " :min="12" :max="100"></Slider>
                                </Col>
                            </Row>
                            <Row>
                                <Col span="6" class="name">
                                    次数
                                </Col>
                                <Col span="18">
                                    <Slider show-input v-model="ac " :min="12" :max="100"></Slider>
                                </Col>
                            </Row>                        
                        </div>                                            
                    </Panel>                  
                </Collapse>
            </Tab-pane> -->
        </Tabs>
    </div>
</template>
<script>
    import {Sketch} from 'vue-color';
    export default {
		data() {
				return {
                    sketchboxBg:false,//背景颜色选色框
                    sketchboxFt:false,//字体颜色选色框      
                    sketchboxbd:false,//边框颜色选色框
                    styleCss:{
                        "fontFamily":'微软雅黑',
                        "fontSize":'12px',
                        "backgroundColor":'',
                        "color":'#fff',
                        "opacity":1,
                        "padding":0,
                        "lineHeight":24,
                        "borderWidth":0,
                        "borderStyle":'none',
                        "borderColor":'none'
                    },//所有样式写个JSON格式
                    fontFamily:[{"value":'SimSun',"label":'宋体'},{"value":'SimHei',"label":'黑体'},{"value":'Microsoft YaHei',"label":'微软雅黑'}],
                    borderStyle:[{"value":'none',"label":'无'},{"value":'solid',"label":'直线'},{"value":'dashed',"label":'破折线'},{"value":'dotted',"label":'点状线'}],
                    a:"",
                    bgColor:'',//背景颜色
                    fontColor:'',//字体颜色
                    borderColor:'',//边框颜色


				}
			},
        props:["fontSize","texthide","currentelstr","currentel",'clearstyleFn'],
        components: {
            'sketch-picker': Sketch
        },
        created(){
            
        },
        watch:{
            "styleCss":{
                handler:"styleCssFun",
                "deep":true //监听一个对象
            }
		},
        activated(){
            //没执行。一进来组件没执行
        },
		methods:{
            txcolorFn(){
                this.styleCss.color=""
            },
            bgclearFn(){
                this.styleCss.backgroundColor=""
            },
            hidetext(){
                this.sketchboxBg=false;
                this.sketchboxFt=false;
                this.sketchboxbd=false;
            },
            showtext(obj){
                this.styleCss=obj
                //this.styleCss.fontFamily="微软雅黑";
                this.styleCss = Object.assign(this.styleCss,obj);
                //this.styleCss.fontSize=parseInt(this.styleCss.fontSize)
                
                for(var i=0;i<this.fontFamily.length;i++){
                    if(this.styleCss.fontFamily==this.fontFamily[i].label){
                        this.styleCss.fontFamily=this.fontFamily[i].value
                    }
                }
                this.styleCss.opacity=this.styleCss.opacity==undefined?100:Number(this.styleCss.opacity)*100;
                this.styleCss.padding=parseInt(this.styleCss.padding);
                this.styleCss.lineHeight=parseInt(this.styleCss.lineHeight);
                this.styleCss.borderWidth=parseInt(this.styleCss.borderWidth);
                this.styleCss.borderStyle=this.styleCss.borderStyle.replace(/(^\s*)|(\s*$)/g, "");
                this.styleCss.backgroundColor=this.styleCss.backgroundColor.replace(/(^\s*)|(\s*$)/g, "");
            },
            onChange(val) {
                this.bgColor = val.hex;
                this.styleCss['backgroundColor'] = this.bgColor; 
            },
            onChange1(val){
                this.fontColor = val.hex;
                this.styleCss['color'] = this.fontColor;                
            },
            onChange2(val){
                 this.borderColor = val.hex;
                 this.styleCss['borderColor'] = this.borderColor; 
            },
            bgcolor(){//选择背景颜色
				this.sketchboxBg = true;
                this.sketchboxFt = false;  
            },
            ftcolor(){//选择字体颜色
				this.sketchboxFt = true;      
                this.sketchboxBg=false;          
            },
            bdcolor(){//
                this.sketchboxbd = true;
            },
            styleCssFun(){
                this.emitstyleCss = Object.assign({},this.styleCss);
                
                for(var i=0;i<this.fontFamily.length;i++){
                    if(this.emitstyleCss.fontFamily==this.fontFamily[i].label){
                        this.emitstyleCss.fontFamily=this.fontFamily[i].label
                    }
                }
                this.emitstyleCss.opacity=this.emitstyleCss.opacity/100;
                this.emitstyleCss.padding=this.emitstyleCss.padding+"px";
                this.emitstyleCss.fontSize=this.emitstyleCss.fontSize;
                this.emitstyleCss.lineHeight=this.emitstyleCss.lineHeight+"px";
                this.emitstyleCss.borderWidth=this.emitstyleCss.borderWidth+"px";
                this.emitstyleCss.borderStyle=this.emitstyleCss.borderStyle;
                this.emitstyleCss.borderColor=this.emitstyleCss.borderColor;
                this.$emit("styletext",this.emitstyleCss,this.currentel,this.currentelstr);
               
            },
            sucbtnFn(){
                this.$emit("emittexthide",false);
            }
		}
    }
</script>